import React from 'react';
import {Table, Icon,Button,Popconfirm,message } from 'antd';
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class myTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:true,
            totalPage:0
        }    
    }
    getList=(pn=1,ps=10)=>{
        this.setState({loading:true});
        fetch(config.base+"course/list?pageNum="+pn+"&&pageSize="+ps,{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.total==null){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.list.length ; i++) {
                    data.push({
                        key: rep.list[i].id,
                        name: rep.list[i].name,
                        startTime: rep.list[i].startTime!=null?config.changeDate(rep.list[i].startTime.time):'未设置',
                        endTime: rep.list[i].endTime!=null?config.changeDate(rep.list[i].endTime.time):'未设置',
                        teacherName: rep.list[i].teacherName,
                        address:rep.list[i].address,
                        status:rep.list[i].status
                        })
                }

                this.setState({
                    tDate: data,
                    totalPage:rep.total,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        sendNotic (id) {
          this.setState({loading:true});
            fetch(config.base+"apply/notice",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"courseId="+id
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                    }else{ 
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }    
        componentDidMount() {
            this.getList();
        }
        render() {
            const tDate=this.state.tDate;
            const  columns = [{
                    title: '课程名称',
                    width: '10%',
                    dataIndex: 'name'
                }, {
                    title: '开始时间',
                    width: '10%',
                    dataIndex: 'startTime',
                },{
                    title: '结束时间',
                    width: '10%',
                    dataIndex: 'endTime',
                },{
                    title: '上课地点',
                    width: '10%',
                    dataIndex: 'address'
                }, {
                    title: '课程老师',
                    width: '5%',
                    dataIndex: 'teacherName',
                    
                }, {
                    title: '操作',
                    width: '20%',
                    dataIndex: 'operate',
                    render:(text, record, index)=> {
                        return (<div>
                            <Button type="primary" onClick={()=>this.sendNotic(tDate[index].key)} htmlType="button" >邮件通知</Button>&nbsp;&nbsp;
                            </div>)
                    }
                }];
            const pagination = {
                total: this.state.totalPage,
                showSizeChanger: true,
                onShowSizeChange:(current, pageSize)=>{
                    this.getList(current,pageSize)
                },
                onChange:(current)=>{
                    this.getList(current)
                }
            }

            return (
                    <Table columns={columns} dataSource={tDate} bordered pagination={pagination} loading={this.state.loading} className="animated fadeInUp " />
            )
        }
    }
